<template>
  <n-space vertical>
    <n-layout
      position="absolute"
      style="width: 100vw"
      :native-scrollbar="false"
    >
      <n-layout
        :native-scrollbar="false"
        class="q"
        :content-style="paddingStyle"
      >
        <div class="q-page">
          <n-page-header>
            <!-- 题目列表 -->
            <div class="q-page-list">
              <div v-for="(q, index) in qArray" :key="q.id" :id="q.type + q.id">
                <div v-if="logicShow(q)">
                  <fill-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :checked="q.more.checked"
                    v-model:fill="q.more.fill"
                    v-if="q.type === 'q-fill'"
                  ></fill-q>
                  <single-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :options="q.more.options"
                    v-model:option="q.more.option"
                    v-if="q.type === 'q-s'"
                  ></single-q>
                  <multi-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :options="q.more.options"
                    v-model:optionsSelect="q.more.optionsSelect"
                    v-if="q.type === 'q-m'"
                  ></multi-q>
                  <rate-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :rate="q.more.rate"
                    :value="q.more.value"
                    v-if="q.type === 'q-rate'"
                  ></rate-q>
                  <locate-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    v-model:locate="q.more.locate"
                    v-if="q.type === 'q-locate'"
                  ></locate-q>
                  <fill-e-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :checked="q.more.checked"
                    :score="q.more.score"
                    v-model:fill="q.more.fill"
                    v-if="q.type === 'eq-fill'"
                  ></fill-e-q>
                  <single-e-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :options="q.more.options"
                    :score="q.more.score"
                    v-model:option="q.more.option"
                    v-if="q.type === 'eq-s'"
                  ></single-e-q>
                  <multi-e-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :options="q.more.options"
                    :score="q.more.score"
                    v-model:optionsSelect="q.more.optionsSelect"
                    v-if="q.type === 'eq-m'"
                  ></multi-e-q>
                  <apply-q
                    :index="showIndex ? Number(index) + 1 : 0"
                    :title="q.title"
                    :remark="q.remark"
                    :required="q.required"
                    :applys="q.more.applys"
                    v-model:option="q.more.option"
                    v-if="q.type === 'q-apply'"
                  ></apply-q>
                  <n-divider></n-divider>
                </div>
              </div>
            </div>
            <!-- 标题 -->
            <template #title>
              <div id="title">
                <n-h1> {{ title }} </n-h1>
              </div>
            </template>
            <!-- 副标题 -->
            <template #subtitle>
              {{ subTitle }}
            </template>
            <!-- 备注信息 -->
            <template #header>
              <div class="note">
                {{ note }}
              </div>
            </template>
            <!-- 头像功能 -->
            <template #avatar>
              <n-icon :size="48">
                <n-icon :size="48">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    t="1630216837848"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    p-id="1765"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M538.566052 851.382571c3.840468 5.503341 8.665357 6.1777 11.910261 6.177699h79.667458c46.873564 0.057305 115.136274-8.711406 185.764867-58.781778 2.738367-1.941212 4.104481-3.081175 8.237615-6.28003 1.579985-1.224898 3.599991-6.755868 1.24434-9.68764-2.488681-3.098571-5.371334-3.13541-6.755867-3.111874-3.281743 0.059352-18.971074 1.112334-22.397103 1.112334-32.843012 0-56.218396-6.489808-71.240531-11.33414-25.983791-8.379854-48.914036-21.962198-60.796668-30.88645a82.753749 82.753749 0 0 0-49.774637-16.665565c-27.997658 0-49.818639 19.508309-55.979965 43.376926-1.394766 5.399987-4.835122 19.184945-8.000208 30.040177-4.976338 17.066701-6.948249 23.419386-13.257955 42.441625-0.186242 0.562818-2.933819 7.42204 1.378393 13.598716z"
                      fill="#aec8d5"
                      p-id="1766"
                    />
                    <path
                      d="M76.839039 613.754498c0 141.792377 116.594485 242.862283 238.447741 243.806795h8.027837c15.32401 0.62831 24.38027 10.333346 28.154223 16.888646 3.302209 5.703909 4.879124 11.974729 4.828982 17.670451v43.602054s0.385786 9.360182 7.436366 16.410762c3.764744 3.765767 10.083659 8.248871 18.547425 7.826245 34.544771-1.723248 61.802578-15.941064 81.461313-36.309973 14.011108-14.519692 20.894889-28.845978 24.871457-37.822421 2.578732-6.260587 6.310729-13.866822 21.864984-57.595766 7.807826-21.945825 12.630668-41.061185 17.154705-57.417711 2.666736-9.644661 4.063549-18.541285 9.999748-29.954219 13.155624-25.287943 38.620599-43.729967 69.061912-46.307675 26.690896-2.26253 47.420009 7.820106 58.441017 16.264429 7.902994 6.053879 26.221198 17.776875 45.596478 26.220174 26.692942 11.633968 58.084906 18.176988 87.86107 18.176988 18.806321 0 44.23548-4.353145 68.511373-19.777438 17.349133-11.021008 32.993438-26.087145 45.213761-48.262191 31.997762-62.306045 34.842553-117.354801 34.842553-143.107325V513.835811c0-78.695317-63.802118-142.640698-142.495388-142.640697l-46.381353 0.013303c-8.31027 0-19.954471-4.013407-27.331486-14.813381-6.104021-8.934486-5.879917-17.774829-5.879917-19.287275v-50.395784c0-19.866467 15.567557-34.486442 34.011628-34.486442 17.820877 0 33.775244 14.442944 33.775244 34.130332 0 18.310018 15.332197 33.642215 33.463136 33.642214 20.399609 0 34.308387-16.176424 34.308387-33.910321 0-57.593719-46.796816-101.681844-101.637841-101.681843-25.241894 0-49.506531 9.423627-67.800176 25.909089-18.48705-16.432251-41.720194-25.90909-68.335364-25.909089-53.761438 0-101.137445 44.054355-101.137445 101.726869 0 17.999956 14.493086 33.865295 33.864272 33.865295 19.288299 0 33.909297-15.688307 33.909297-33.775244 0-19.065218 15.554254-33.997302 33.68724-33.997302 17.643845 0 34.085306 13.687744 34.085307 34.174334l0.012279 50.929949s0.522909 11.511171-7.610328 21.375844c-6.971785 8.456602-16.829294 12.489452-26.264177 12.489452H250.258741s-10.695596 0.221034-18.472724-2.133594c-9.394974-2.845815-15.924691-5.716188-24.397666-12.177343-14.22191-10.842952-25.747407-30.309306-25.747408-52.112892 0-19.829628 7.611352-36.94647 21.481244-49.923016 11.998265-11.228739 28.707832-18.813484 48.587602-17.971304 4.208858 0 13.274328 0.905626 23.140023 6.061043 9.68764 5.061272 16.393365 12.907984 17.70729 14.898315l0.030699-0.026606c18.241456 24.121374 45.234227 41.259706 76.259848 46.648436 0.180102 0.020466 0.36839 0.059352 0.535189 0.081865 4.492314 0.682545 10.081613 0.170892 15.193028-4.628414 5.03876-4.732791 5.248537-10.389628 5.248537-12.396331V234.790444c0-4.193509-1.11745-6.962575-2.049682-8.562003-0.934279-1.600451-3.287883-6.000668-9.668197-8.261151-13.859659-4.910846-23.829731-18.053168-23.829732-33.578769 0-15.487739 9.91379-28.677133 23.746844-33.549094 0 0 3.973498-0.961908 7.706519-5.184069 4.339842-4.907777 4.094248-10.576893 4.094248-11.71788v-52.679803c0-2.8847-1.022283-8.839319-5.960759-12.932543-4.932336-4.087085-9.442046-4.699022-14.157441-4.131088-0.212848 0.023536-0.429789 0.066515-0.652869 0.103354-31.547507 5.418406-58.769498 23.302729-76.368318 46.647413l-0.500397 0.629334c-4.601808 6.095835-12.238742 12.585643-22.547529 16.673751-5.131881 2.034333-13.041014 3.804652-19.039635 3.804652v0.023536c-95.302553 0.830925-173.758416 77.470419-173.758416 176.227654v305.45076z m703.32142 50.697659c-12.294001 13.910824-33.516348 15.260565-47.446615 2.971682-13.910824-12.254092-15.248286-33.513278-2.968611-47.435359 12.262278-13.913894 33.516348-15.246239 47.430242-2.968611 13.929244 12.270465 15.250332 33.511231 2.984984 47.432288z"
                      fill="#aec8d5"
                      p-id="1767"
                    />
                  </svg>
                </n-icon>
              </n-icon>
            </template>
            <!-- 额外功能区 -->

            <!-- 尾部 // TODO-->
            <template #footer>
              <div class="footer">
                <n-space justify="center">
                  <n-space vertical>
                    <n-button type="primary" @click="submit">提交问卷</n-button>
                    <n-divider></n-divider>
                    鲸语问卷 提供技术支持
                  </n-space>
                </n-space>
              </div>
            </template>
          </n-page-header>
        </div>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import MultiQ from './components/NormalQuestion/MultiChoiceQ.vue';
import FillQ from './components/NormalQuestion/FillQ.vue';
import RateQ from './components/NormalQuestion/RateQ.vue';
import SingleQ from './components/NormalQuestion/SingleChoiceQ.vue';
import LocateQ from './components/NormalQuestion/LocationQ.vue';
import FillEQ from './components/ExamQuestion/FillEQ.vue';
import MultiEQ from './components/ExamQuestion/MultiChoiceEQ.vue';
import SingleEQ from './components/ExamQuestion/SingleChoiceEQ.vue';
import ApplyQ from './components/SpecialQuestion/ApplyQ.vue';

// 响应式 padding
const paddingStyle = computed(() => {
  return window.innerWidth > 1080
    ? 'padding: 14vh 18vw 10vh 18vw'
    : window.innerWidth > 650
    ? 'padding: 14vh 7vw 10vh 7vw'
    : '';
});

// 是否可以拖拽
const sortable = ref(true);

const props = defineProps({
  title: String,
  note: String,
  qArray: Object,
  showIndex: Boolean,
});

// 问卷基本信息
const showIndex = props.showIndex;
const title = props.title;
const id = ref(0);
const ip = ref('');
const ipLocation = ref('');
const note = props.note;
const subTitle = ref('');
const version = ref('');
const amount = computed(() => {
  qArray.value.length;
});

// 题目列表数据
const qArray: any = ref(props.qArray!);

// 提交问卷
const submit = () => {
  window.$message.info('当前处于预览状态无法提交哦！');
};

// 找到题目
function findQ(id: number) {
  let found = qArray.value.length;
  for (let i = 0; i < found; i++) {
    if (qArray.value[i].id === id) {
      return i;
    }
  }
  return -1;
}
// 判断数组是否符合条件
// array1 选的 array2 预设的
const isArrayEqual = (array1: any, array2: any, min: number, max: number) => {
  if (array1.length > max || array1.length < min) return false;
  console.log(array1, array2);
  if (
    array1.sort().toString() == array2.sort().toString() &&
    array1.length === min
  ) {
    return true;
  }
  let num = 0;
  for (let i = 0; i < array2.length; i++) {
    let tmp = array2[i];
    for (let j = 0; j < array1.length; j++) {
      if (tmp === array1[j]) {
        num++;
        continue;
      }
    }
  }
  if (num > max || num < min) return false;
  return true;
};
// 逻辑判断是否显示
const logicShow = (q: any) => {
  console.log(q);
  if (q.more?.logic && q.more?.logic?.before?.length !== 0) {
    console.log('has logic');
    for (let i = 0; i < q.more.logic.before.length; i++) {
      let ele = q.more.logic.before[i];
      console.log('ele: ', ele);
      console.log(ele.id);
      console.log(ele.type);
      let index = findQ(ele.id);
      console.log(qArray.value[index]);
      if (qArray.value[index].type === 'q-s') {
        console.log('qs-start');
        let tempO = ele.options[0];
        console.log(
          'qArray.value[index].more.option: ',
          qArray.value[index].more.option
        );
        if (
          !qArray.value[index].more.option ||
          qArray.value[index].more.option !== tempO
        ) {
          console.log('false');
          return false;
        }
      } else if (qArray.value[index].type === 'q-m') {
        console.log('qm-start');
        if (
          !qArray.value[index]?.more?.optionsSelect ||
          !isArrayEqual(
            qArray.value[index].more.optionsSelect,
            ele.options,
            ele.min,
            ele.max
          )
        ) {
          console.log('false');
          return false;
        }
      } else {
        console.log('true');
        return true;
      }
    }
    console.log('true');
    return true;
  }
  console.log('true');
  return true;
};
</script>

<style scoped lang="scss">
.q {
  min-height: 100vh;
  background: url('@images/bg-2.png');
  background-position: 38% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  &-page {
    background-color: #fff;
    padding: 2vh 2vw 3vh 2vw;
    #id {
      width: 50vw;
      color: yellow;
    }
  }
}

// 右侧栏
.side {
  width: 10vw;
  position: absolute;
  right: 2vw;
  top: 3vh;
}

// 题目右侧选择栏
.side-option {
  height: 14vh;
  margin-top: -1vh;
  button {
    margin: 2px;
  }
  // background-color: #111;
}
.note {
  color: #999;
}
.footer {
  div {
    text-align: center;
  }
}
// 提交栏
.q-submit {
  min-width: 10vw;
  max-width: 10vw;
  top: 50vh;
  right: 3vw;
  button {
    width: 10vw;
  }
}
</style>
